<template>
  <div class="app-container home">
  <div class="map">
    <div>
      <span id="data">数据总揽</span>
      <ul class="datalist">
        <li>
          <span>地块数量</span>
          <span>
            <svg-icon iconClass="landnum"></svg-icon>
            <a>15</a>
          </span>
        </li>
        <li>
          <span>农产品种类</span>
          <span>
            <svg-icon iconClass="cropsnum"></svg-icon>
            <a>36</a>
          </span>
        </li>
        <li>
          <span>农基地数量</span>
          <span>
            <svg-icon iconClass="farmnum"></svg-icon>
            <a>36</a>
          </span>
        </li>
        <li>
          <span>农户</span>
          <span>
            <svg-icon iconClass="farmernum"></svg-icon>
            <a>36</a>
          </span></li>
      </ul>
    </div>
   <div class="containerstyle" id="container"></div>
</div>
<div class="charts1">
  <div id="activitychart"></div>
  <div id="kindchart"></div>
</div>
<div class="charts2">
  <div id="windchart"></div>
  <div id="waterchart"></div>
  <div id="tempchart"></div>
  <div id="sunshinechart"></div>
</div>
<div class="charts3">
  <div id="landchart"></div>
  <div id="inputschart"></div>
  <div id="filmchart"></div>
</div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import IconsDialog from './tool/build/IconsDialog.vue';
import 'echarts-liquidfill';


window._AMapSecurityConfig = {
  securityJsCode:"ba5d7f7c0345d91603cd4f80fb585c43",
};

export default {
  components: { IconsDialog },
  name: "Index",
  data() {
    return {
      //版本号
      version: "3.8.7",
      // 地图map对象
      map: undefined
    };
  },
  mounted(){
      //数据渲染完成后执行
      this.initMap();
      this.createActivitychart();
      this.creatKindchart();
      this.createWindchart();
      this.createWaterchart();
      this.createTempchart();
      this.createSunshinechart();
      //this.createLandchart();
      this.createInputschart();
      this.createFilmchart();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    /**
     * 1.绘制卫星图
     * */
    initMap(){
      AMapLoader.load({
      key: "5654267437260b0b8b1c6547782fa529", //申请好的Web端开发者key，调用 load 时必填
      version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      //JS API 加载完成后获取AMap对象
      var satellite = new AMap.TileLayer.Satellite();
      const map = new AMap.Map("container", {
        viewMode: '2D', //默认使用 2D 模式
        zoom: 15, //地图级别
        center: [118.817608,36.857366], //地图中心点
        layers: [satellite],
        });
    }).catch((e) => {
      console.error(e); //加载错误提示
    });
    },
    createActivitychart(){
        let myChart = this.$echarts.init(document.getElementById('activitychart'));
        myChart.setOption({
          xAxis:{
            axisLabel: {
            //  formatter: '{value} 千 ',
              fontSize: 10,

            },
          },
          yAxis:{
            data: ["酸性土壤","丘陵地带","水培","间作套种","平原田地","地膜覆盖","温室大棚"],
            axisLabel: {
              fontSize: 10,
            },
            axisTick:{
              show:false,
              inside:true
            }
          },
          grid: { // 设置网格属性
            left: '15%', // 左侧边距
            right: '10%', // 右侧边距
            bottom: '20%', // 底部边距
            top: '15%' // 顶部边距
         },
          series:{
            type:"bar",
            data:[8,12,5,8,10,8,20],
            label:{
              show:true,
              position:'right',
            }
          },
          title:{
                text:"农地类型分布",
                left:"left",
                textStyle:{
                    color:"black",
                    fontSize:12
                },
            },
        });
        window.addEventListener('resize',function(){
				  myChart.resize();
			})
    },
    creatKindchart(){
      let myChart = this.$echarts.init(document.getElementById('kindchart'));
      myChart.setOption({
        title:{
          text:'农产品种类分布',
          textStyle:{
            fontSize:12,
            color:"black",
          }
            },
          legend:{
            left:"right",
            orient:"vertical"
          },//图例
          tooltip:{},//提示
          radar:{
            indicator:[
              {name:'白菜',min:0,max:100,color:"black"},
              {name:"油麦菜",min:0,max:100,color:"black"},
              {name:"菠菜",min:0,max:100,color:"black"},
              {name:"西红柿",min:0,max:100,color:"black"},
              {name:"马铃薯",min:0,max:100,color:"black"},
              {name:"大蒜",min:0,max:100,color:"black"},
                    ],
            radius:58,
            center:["45%","50%"],
            shape:"polygon",//形状：polygon 多边形（默认）/ circle：
              axisLine:{
                lineStyle:{
                  color:"white",//中心线
                }
                },
              splitLine:{
                lineStyle:{
                  color:"grey",//分割区间的线
                }
              }
                },
            series:{
                type:"radar",
                //radius:["10%","70%"],//设置内外半径
                data:[
                  {
                    name:"大棚1",
                    value:[20,30,65,10,77,65],
                    itemStyle:{
                      normal:{
                        color:"blue"
                      }
                    }
                  },
                  {
                    name:"大棚2",
                    value:[56,89,30,87,45,66],
                    itemStyle:{
                      normal:{
                        color:"rgb(27, 151, 200)"
                      }
                    }
                  },
                  {
                    name:"大棚3",
                    value:[88,56,33,11,23,45],
                    itemStyle:{
                      normal:{
                        color:"rgb(121, 213, 249)"
                      }
                    }
                  }
                ],

            }
      })
    },
    createWindchart(){
      let myChart = this.$echarts.init(document.getElementById('windchart'));
      myChart.setOption({
        title:{
          text:'风力示意图',
          textStyle:{
            fontSize:12,
            color:"black",
          }
        },
        xAxis:{
          data:[1,2,3,4,5],
          axisLabel: {
            formatter: '{value} 月 ',
            fontSize: 10,
            },
        },
        yAxis:{},
        series:[{
          name:"最大风力",
          type:"line",
          data:[12,30,40,12,8],
            //yAxisIndex:0,
         },{
          name:"最小风力",
          type:'line',
          data:[10,20,24,10,1]
        }],
        tooltip:{
          trigger:"item"
          },
        grid: {
          left: '15%',
          right: '10%',
          bottom: '15%',
          top: '15%'
         },
        legend:{
          left:"right",
          orient:"vertical"
          },
      })
    },
    createWaterchart(){
      let myChart = this.$echarts.init(document.getElementById('waterchart'));
      myChart.setOption({
        title:{
          text:'降水示意图',
          textStyle:{
            fontSize:10,
            color:"black",
          }
        },
        xAxis:{
          data:[1,2,3,4,5],
          axisLabel:{
            formatter:'{value} 月',
            fontSize:10
          }
        },
        yAxis:{},
        series:[{
            name:'最高降水量',
            type:'bar',
            data:[100,250,500,130,120]
          },{
            name:'最低降水量',
            type:'bar',
            data:[50,200,430,120,50],
          }],
        tooltip:{
          trigger:"item",
        },
        grid:{
          left: '15%',
          right: '10%',
          bottom: '15%',
          top: '15%'
        },
        legend:{
          left:'right',
          orient:'vertical'
        }
      })
    },
    createTempchart(){
      let myChart = this.$echarts.init(document.getElementById('tempchart'));
      myChart.setOption({
        title:{
          text:'气温示意图',
          textStyle:{
            fontSize:12,
            color:'black'
          },
        },
        xAxis:{
          data:[1,5,9,12],
          axisLabel:{
            formatter:'{value} 月',
            fontSize:10
        }
        },
        yAxis:{},
        series:{
          data:[-8,16,18,-4],
          type:'line'
        },
        grid: {
          left: '15%',
          right: '10%',
          bottom: '15%',
          top: '15%'
         },
        tooltip:{
          trigger:"item"
          },
      })
    },
    createSunshinechart(){
      let myChart = this.$echarts.init(document.getElementById('sunshinechart'));
      myChart.setOption({
        title:{
          text:'光照时长示意图',
          textStyle:{
            fontSize:12,
            color:'black'
          }
        },
        xAxis:{
          data:[1,5,9,12],
          axisLabel:{
            formatter:'{value} 月',
            fontSize:10
          },

        },
        yAxis:{},
        series:[{
          name:'辅助柱子',
          type:'bar',
          stack:'all',
          itemStyle:{
            normal:{
              barBorderColor:'rgba(0,0,0,0)',
              color:'rgba(0,0,0,0)'
            },
            emphasis:{
              barBorderColor:'rgba(0,0,0,0)',
              color:'rgba(0,0,0,0)'
            }
          },
          data:[0,900,1245,1530]
        },{
          name:'升温',
          type:'bar',
          stack:'all',
          label:{
            normal:{
              show:true,
              position:'top'
            }
          },
          data:[900,345,393,'-']
        },{
          name:'降温',
          type:'bar',
          stack:'all',
          label:{
            normal:{
              show:true,
              position:'bottom'
            }
          },
          data:['-','-','-',138]
        }
      ],
        legend:{
          itemWidth:8,
          itemHeight:10,
          data:['升温','降温'],
          left:"right",
          orient:"vertical",
          textStyle:{
            fontSize:10
          }
        },
        grid: {
          left: '18%',
          right: '10%',
          bottom: '15%',
          top: '15%'
         },
         tooltip: {
          trigger: 'axis',
          axisPointer:{
            type:'shadow'
          },
          formatter:function(params){
            let tar;
            if(params[1]&& params[1].value !=='-'){
              tar = params[1];
            }else{
              tar = params[2];
            }
            return tar && tar.name + '<br/>' + tar.seriesName + ':' +tar.value;
          }
        }
      })

    },
    // createLandchart(){
    //   let myChart = this.$echarts.init(document.getElementById('landchart'));
    //   myChart.setOption({
    //     // title:{
    //     //   text:'土地使用情况示意图',
    //     //   textStyle:{
    //     //     fontSize:12,
    //     //     color:'black'
    //     //   },
    //     // },
    //     series: [{
    //         type: 'liquidFill',
    //         data: [0.6, 0.5, 0.4, 0.3],
    //         shape:'container',
    //         label:{
    //           show:false
    //         },
    //         outline:{
    //           show:false
    //         }
    //       }]
    //   })
    //  },
    createInputschart(){
      let myChart = this.$echarts.init(document.getElementById('inputschart'));
      myChart.setOption({
        title:{
          text:'投入品使用及剩余情况',
          textStyle:{
            fontSize:12,
            color:'black'
          },
          left:'center'
        },
        grid: {
          left: '15%',
          right: '10%',
          bottom: '15%',
          top: '15%'
         },
        tooltip: {
          trigger: 'axis',
          axisPointer:{
            type:'shadow'
          }},
        legend:{
          itemWidth:8,
          itemHeight:10,
          left:"right",
          orient:"vertical"
        },
        xAxis:{
          data:["化肥","农药","种子","水源"]
        },
        yAxis:{},
        series:[{
          name:'投入',
          stack:'all',
          type:'bar',
          data:[240,230,420,220],
          color:'rgb(240, 128, 22)'
        },{
          name:'使用',
          stack:'all',
          type:'bar',
          data:[100,110,210,100],
          color:"orange"
        }
      ]

      })
    },
    createFilmchart(){
      let myChart = this.$echarts.init(document.getElementById('filmchart'));
      myChart.setOption({
        title:{
          text:'农膜覆盖情况',
          textStyle:{
            fontSize:12,
            color:'black'
          },
          left:'center'
        },
        series:{
          type:'pie',
          data:[
            {name:"已覆盖",value:73},
            {name:"未覆盖",value:27}
          ],
          radius:["50%","70%"],
        },
        tooltip:{
          trigger:'item'
        },
        label:{
          formatter:(
            {name,percent}) => {
               return  name+"\n"+ Math.round(percent)+"%"
           },
        }
      })
    }

  }
};
</script>


<style scoped lang="scss">
.home {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: auto;
  padding: 0 0 0 8px;
  background: rgb(238, 236, 236);
}
.map{
  height:45%;
  width: 58%;
  display: inline-block;
  float: left;
  background: rgb(255, 255, 255);
}
.containerstyle{
  height:70%;
  width: 70%;
  margin-left: 10%;
  margin-top: 4px;
  border-radius: 10%;
  border: 1px solid black;
}
#data{
  font-size: 15px;
	font-weight: bold;
  display: block;
}
.datalist{
  display: block;
  width: 100%;
  height: fit-content;
  margin: 0;
  padding: 0;
}
.datalist li{
  text-decoration: none;
	list-style: none;
  font-size: 14px;
  width: 25%;
  height: 100%;
  display: block;
  float: left;
}
.datalist li span{
  display: block;
  width: 100%;

}
.datalist li span a{
  font-size: 18px;
  margin-left: 5px;
}
.charts1{
  width: 40%;
  height: 45%;
  margin-left: 10px;
  float: left;
  display: inline-block;
}
.charts1 div{
  width: 100%;
  height: 49%;
  overflow: hidden;
}
#activitychart{
  width: 100%;
  height: 40%;
  margin-bottom: 2% ;
  background: rgb(255, 255, 255);
}
#kindchart{
  width: 100%;
  height: 58%;
  background: rgb(255, 255, 255);
}
.charts2{
  width: 100%;
  height: 29%;
  float: left;
  display: flex;
}
.charts2 div{
  width: 24%;
  height: 99%;
  float: left;
  background: rgb(255, 255, 255);
  margin-right: 1%;
  margin-top: 1%;
  overflow: hidden;
}
.charts3{
  width: 99%;
  height: 24%;
  float: left;
  display: flex;
  margin-top:1.5% ;
  background: rgb(255, 255, 255);
}
.charts3 div{
  width: 33%;
  height: 100%;
  float: left;
  overflow: hidden;
}
</style>

